<template>
	<view  class="my-detail" :style="{background: releaseType === 'news' ? '#fffcf5' : ''}">
		
		<!--  多文字详情内容  多详情图片  上传视频    布局放在详细信息 卡片 底下 -->
		<view class="cardBox" :class="type == 2 ? 'yellow' : ''" style="padding: 0px;">
			
			<view class="cardBoxs" v-if="detailData.content||
			((detailData.buy_images)&&(detailData.buy_images.length!=0))
			||((detailData.buy_videos)&&(detailData.buy_videos.length!=0))">
				<span style="color:darkorange ; margin-right: 5px; ">|</span> 
				{{$t(goods_info)}}
			</view>
				
			<!--  多文字详情内容 -->
			<block v-if="detailData.content">	
				<view class="detailData_content"  v-if="lang==='zh'" >
					{{detailData.content?detailData.content:''}}
				</view>
				<view class="detailData_content"  v-if="lang !='zh'" >
					{{detailData.content_ru?detailData.content_ru:''}}
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
			</block>
		
			<!--  多详情图片 -->
			
			
			<!-- <block v-if="type==1&&releaseType=='crossborder'"></block> -->
			<!--  跨境货代推广  视频和图片 放顶部了 -->

			<!-- 			<block v-else> -->
							
				<view v-if="detailData.buy_images&&detailData.buy_images.length!=0"
				v-for="(item,index) in detailData.buy_images" :key="index" 
				style="margin-top: 15rpx;padding: 10rpx 20rpx;">
					<image :src="ImageUrl(item)" mode="widthFix" style="width: 100%;"></image>
				</view>
				
						
				<!--  货物的视频 放顶上了  -->
				<block v-if="releaseType=='goods'"></block>		
				<!--  货物的视频 放顶上了  -->	
				<block v-else>
					<view v-if="detailData.buy_videos&&detailData.buy_videos.length!=0" class="ui-item"
					style="border: 0px;margin-top: 15rpx;padding: 10rpx 20rpx;">
						<view class="ui-video" v-for="(itemFile,indexFile) in detailData.buy_videos" :key="indexFile">			
							<video style="width:100%" loop :initial-time="0" 
							:id="'myVideo' + indexFile" :enable-play-gesture="true"
								object-fit="cover" :src="ImageUrl(itemFile)"
								:poster="ImageUrl(itemFile) + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"></video>
						</view>
					</view>
				</block>
							
			<!-- 			</block> -->
			
			
		</view>
		
		<!--  上传文件 -->
		<view v-if="detailData.buy_files&&detailData.buy_files.length!=0" class="cardBox" :class="type == 2 ? 'yellow' : ''">
			<view style="margin-top: 10rpx;margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;">
				<span style="color:darkorange ; margin-right: 5px;">|</span> 
				{{$t(file_info)}}
			</view>		
			<view class="buy_files" v-if="detailData.buy_files&&detailData.buy_files.length!=0" 
			v-for="(itemFile,index) in detailData.buy_files" :key="index">
				<view style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(itemFile)">
					{{ itemFile.substring(itemFile.length, itemFile.length - 20) }}
				</view>
			</view>
		</view>
		
		<!--  上传采购清单 -->
		<view v-if="detailData.filelist" class="cardBox" :class="type == 2 ? 'yellow' : ''">
			<view style="margin-top: 10rpx;margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;">
				<span style="color:darkorange ; margin-right: 5px;">|</span> 
				{{$t(filelist)}}
			</view>		
			<view class="buy_files" v-if="detailData.filelist">
				<view style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(detailData.filelist)">
					{{ detailData.filelist.substring(detailData.filelist.length, detailData.filelist.length - 20) }}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		IMAGE_URL
	} from '@/config/app'
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	export default {
		props: {
			detailData: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			releaseType:{
				type: String | Number,
				default: '',
			}
		},
		data() {
			return {
				IMAGE_URL,
				loading: false,
				lang: getApp().globalData.lang,
				goods_info:'详情',
				file_info:'文件',
				filelist:'采购清单',
			}
		},
		mounted() {
			if(this.releaseType=='transport'){
				if(this.detailData.release_type==1){
					this.goods_info = '驾驶证图片'			
				}
			}
			if(this.releaseType=='professional'){
				if(this.type==1){
					this.goods_info = '工作内容'					
				}else{
					this.goods_info = '工作内容'
				}
			}
			if(this.releaseType=='lifead'){
				if(this.type==1){
					this.goods_info = '广告内容'
				}
			}
			if(this.releaseType=='exposure'){
				if(this.type==1){
					this.goods_info = '曝光内容'
				}
			}
			
			
			
		},
		methods: {
			ImageUrl,
			isVideo,
			time,
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title:"download...",
					mask:true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({progress,totalBytesWritten,totalBytesExpectedToWrite}) => {
					if(progress === 100){
						downloadTask.offProgressUpdate();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.cardBoxs{
	margin-top: 10rpx;margin-left: 0rpx;padding: 20rpx;font-size: 30rpx;font-weight: bold;
}
.buy_files{
	margin-top: 15rpx;border-radius: 20rpx;background-color: rgb(235, 241, 245);color: rgb(94, 157, 237);
}
.detailData_content{
	margin-top: 20rpx;margin-bottom: 20rpx;word-break: break-all; padding: 20rpx; color: #666; border-radius: 20rpx; background-color: rgb(235, 241, 245); margin-left: 2%;width: 96%;
}
.my-detail {
	background-color: #ffffff;
	padding-bottom: 160rpx;

	.cardBox {
		width: 90%;
		margin: 0 auto;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
		&.yellow{
			background: #fefcf6;
		}

	}

	.newTitle {
		width: 90%;
		margin: 0 auto;
		font-weight: 600;
		padding-top: 40rpx;
		.icon{
			margin-left: 10rpx;
			transform: rotate(-90deg);
			font-weight: normal;
		}
	}
}
</style>
